<template>
  <div class="app-container" id="container">
    <!-- <div style="margin: 5%;">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
            v-hasPermi="['jktj:customer:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
            v-hasPermi="['jktj:customer:edit']">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
            v-hasPermi="['jktj:customer:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
            v-hasPermi="['jktj:customer:export']">导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    </div> -->
    <el-divider content-position="center">
      <h1>体检报告</h1>
    </el-divider>
    <div class="addForm">
      <el-divider content-position="center">基本信息</el-divider>
      <el-form :disabled="false" ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="体检套餐" prop="setmId">
              <el-select :disabled="true" v-model="form.setmId" placeholder="请选择体检套餐">
                <el-option v-for="item in setmOptions" :key="item.setmId" :label="item.name" :value="item.setmId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="患者姓名" prop="tjUser">
              <el-input v-model="form.tjUser" placeholder="请输入患者姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="患者性别" prop="userSex">
              <el-select v-model="form.userSex" placeholder="请选择患者性别">
                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="身份证号" prop="identityCard">
              <el-input v-model="form.identityCard" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="录入医生" prop="doctor">
              <el-input :disabled="true" v-model="form.doctor" placeholder="请输入录入医生" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="健康评估" prop="healthAssess">
          <el-radio-group v-model="form.healthAssess">
            <el-radio v-for="dict in dict.type.health_assessment" :key="dict.value" :label="dict.value">{{ dict.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-row>
          <el-col :span="14">
            <el-form-item label="健康评估" prop="healthAssess">
              <el-radio-group v-model="form.healthAssess">
                <el-radio v-for="dict in dict.type.health_assessment" :key="dict.value" :label="dict.value">{{ dict.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="10">

          </el-col>
        </el-row> -->

        <el-row>
          <el-col :span="10">
            <el-form-item label="医生建议" prop="doctorAdvice">
              <el-input type="textarea" v-model="form.doctorAdvice" placeholder="请输入医嘱" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="其他内容" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入其他内容" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="体检类型" prop="tjType">
          <el-radio-group v-model="form.tjType">
            <el-radio v-for="dict in dict.type.health_examination_type" :key="dict.value" :label="dict.value">{{
              dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="检查路径" prop="inspect">
          <el-checkbox-group v-model="form.inspect">
            <el-checkbox v-for="dict in dict.type.health_examine" :key="dict.value" :label="dict.value">
              {{ dict.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="出现症状" prop="symptom">
          <el-checkbox-group v-model="form.symptom">
            <el-checkbox v-for="dict in dict.type.health_symptom" :key="dict.value" :label="dict.value">
              {{ dict.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!-- <el-form-item label="满意度" prop="satisficing">
          <el-select v-model="form.satisficing" placeholder="请选择满意度">
            <el-option v-for="dict in dict.type.assess_result" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item> -->


        <div style="margin: 5%;">
          <el-divider content-position="center">各项检查信息</el-divider>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="success" icon="el-icon-plus" size="mini"
                @click="handleAddJktjCheckInfo">添加其他附加项目</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteJktjCheckInfo">删除</el-button>
            </el-col>
          </el-row>
          <el-table border :data="jktjCheckInfoList" :row-class-name="rowJktjCheckInfoIndex"
            @selection-change="handleJktjCheckInfoSelectionChange" ref="jktjCheckInfo">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="序号" align="center" prop="index" width="50" />
            <el-table-column label="项目名称" prop="checkInfo" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.checkInfo" placeholder="请输入项目信息" />
              </template>
            </el-table-column>
            <el-table-column label="检查结果" prop="checkResult" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.checkResult" placeholder="请输入检查结果" />
              </template>
            </el-table-column>
            <el-table-column label="基本单位" prop="unit" width="150">
              <!-- <template slot-scope="scope">
                <el-input v-model="scope.row.unit" placeholder="请输入基本单位" />
              </template> -->
            </el-table-column>
            <el-table-column label="检查科室" prop="setmId" width="150">
              <template slot-scope="scope">
                <el-select v-model="scope.row.setmId" placeholder="请选择检查科室" @change="selectDep(scope.row)">
                  <el-option v-for="item in depOptions" :key="item.depId" :label="item.depName"
                    :value="item.depId"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="体检医生" prop="tjDoctor" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.tjDoctor" placeholder="请输入体检医生" />
                <!-- <el-select v-model="scope.row.setmId" placeholder="请选择检查科室">
                  <el-option v-for="item in doctorOptions" :key="item.id" :label="item.doctorName"
                    :value="item.id"></el-option>
                </el-select> -->
              </template>
            </el-table-column>

          </el-table>
        </div>



      </el-form>
      <div slot="footer" class="dialog-footer" style="margin: 5%;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
        <el-button type="warning" @click="generate">生成报告</el-button>
      </div>
    </div>




    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" /> -->



  </div>
</template>

<script>

import { listSetmeal, getSetmeal, delSetmeal, addSetmeal, updateSetmeal } from "@/api/jktj/setmeal";
import { getEntering, addEntering, updateEntering } from "@/api/jktj/entering";
import { listDepartment, getDepartment, delDepartment, addDepartment, updateDepartment } from "@/api/jktj/department";
import html2canvas from 'html2canvas';
import { listDoctor } from "@/api/jktj/doctor";

export default {
  name: "Customer",
  dicts: ['health_examination_type', 'health_symptom', 'health_assessment', 'assess_result', 'sys_user_sex', 'health_examine'],
  data () {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedSysGoods: [],
      setmOptions: [],
      doctorOptions: [],
      // 体检信息表格数据
      jktjCheckInfoList: [],
      depOptions: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户表格数据
      customerList: [],
      // 商品表格数据
      sysGoodsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerName: null,
        phonenumber: null,
        sex: null,
        birthday: null,
      },
      queryDoctor: {
        depId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created () {
    // this.getList();
    this.getAllSetmealList();
    this.getCheckInfo();
    this.getAllDepList();
  },
  methods: {
    generate () {
      this.generateImage();
    },
    selectDep (row) {
      console.log(row);
      // this.queryDoctor.depId = row.setmId;
      // listDoctor(this.queryDoctor).then(response => {
      //   this.doctorOptions = response.rows;
      //   if (this.doctorOptions.length != 0) {
      //     this.jktjCheckInfoList.tjDoctor = response.rows[0].doctorName
      //   } else {
      //     this.jktjCheckInfoList.tjDoctor = null
      //   }
      // })
    },
    //生成体检报告
    generateImage () {
      const element = document.getElementById('container'); // 替换为目标元素的id或class  
      html2canvas(element).then((canvas) => {
        const image = canvas.toDataURL('image/png');
        const link = document.createElement('a');
        link.href = image;
        link.download = 'checkReport.png';
        link.click();
      });
    },
    //获取所有科室列表
    getAllDepList () {
      listDepartment().then(response => {
        this.depOptions = response.rows
      })
    },
    //获取所有套餐列表
    getAllSetmealList () {
      listSetmeal().then(response => {
        this.setmOptions = response.rows
      })
    },
    // 获取体检详情
    getCheckInfo () {
      this.reset();
      if (this.$route.query.id) {
        getEntering(this.$route.query.id).then(response => {
          this.form = response.data;
          this.form.inspect = this.form.inspect.split(",");
          this.form.symptom = this.form.symptom.split(",");
          this.jktjCheckInfoList = response.data.jktjCheckInfoList;
        })

      }
    },

    // 取消按钮
    cancel () {
      // this.open = false;
      // this.reset();
      const obj = { path: "/tjRecord/entering" };
      this.$tab.closeOpenPage(obj);
    },
    // 表单重置
    reset () {
      this.form = {
        entId: null,
        setmId: null,
        doctor: null,
        tjUser: null,
        userSex: null,
        identityCard: null,
        tjType: null,
        inspect: [],
        symptom: [],
        phone: null,
        healthAssess: null,
        doctorAdvice: null,
        remark: null,
        satisficing: null
      };
      this.jktjCheckInfoList = [];
      // this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.customerId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset();
      this.open = true;
      this.title = "添加客户";
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.reset();

    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.inspect = this.form.inspect.join(",");
          this.form.symptom = this.form.symptom.join(",");
          this.form.jktjCheckInfoList = this.jktjCheckInfoList;
          // console.log(this.jktjCheckInfoList)
          console.log(this.form)
          if (this.form.entId != null) {
            updateEntering(this.form).then(response => {
              this.$modal.msgSuccess("体检结果录入成功！");
              this.open = false;
              this.getCheckInfo(this.form.entId);
            });
          } else {
            addEntering(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              // this.getList(); 
            });
          }
        }
      });
    },
    /** 体检信息添加按钮操作 */
    handleAddJktjCheckInfo () {
      let obj = {};
      obj.checkInfo = "";
      obj.checkResult = ""
      obj.unit = "";
      obj.tjDoctor = "";
      obj.setmId = "";
      obj.img = "";
      this.jktjCheckInfoList.push(obj);
      // console.log(this.jktjCheckInfoList.push(obj))
    },
    /** 体检信息删除按钮操作 */
    handleDeleteJktjCheckInfo () {
      if (this.checkedJktjCheckInfo.length == 0) {
        this.$modal.msgError("请先选择要删除的体检信息数据");
      } else {
        const jktjCheckInfoList = this.jktjCheckInfoList;
        const checkedJktjCheckInfo = this.checkedJktjCheckInfo;
        this.jktjCheckInfoList = jktjCheckInfoList.filter(function (item) {
          return checkedJktjCheckInfo.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleJktjCheckInfoSelectionChange (selection) {
      this.checkedJktjCheckInfo = selection.map(item => item.index)
    },
    /** 删除按钮操作 */
    handleDelete (row) {

    },
    /** 商品序号 */
    rowSysGoodsIndex ({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 商品添加按钮操作 */
    handleAddSysGoods () {
      let obj = {};
      obj.customerId = "";
      obj.name = "";
      obj.weight = "";
      obj.price = "";
      obj.date = "";
      obj.type = "";
      this.sysGoodsList.push(obj);
    },
    /** 体检信息序号 */
    rowJktjCheckInfoIndex ({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 商品删除按钮操作 */
    handleDeleteSysGoods () {
      if (this.checkedSysGoods.length == 0) {
        this.$modal.msgError("请先选择要删除的商品数据");
      } else {
        const sysGoodsList = this.sysGoodsList;
        const checkedSysGoods = this.checkedSysGoods;
        this.sysGoodsList = sysGoodsList.filter(function (item) {
          return checkedSysGoods.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleSysGoodsSelectionChange (selection) {
      this.checkedSysGoods = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download('jktj/customer/export', {
        ...this.queryParams
      }, `customer_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
.addForm {
  margin: 5%;
  border: 1px solid #000;
}
</style>
